<!-- home路由组件 -->

<template>
  <div>
    <!-- 首页轮播图的结构 -->
    <Carousel />
    <!-- 首页搜索框的区域 -->
    <Search />
    <!-- 底部展示医院的结构 -->
    <el-row :gutter="10">
      <el-col :span="20">
        <!-- 首页等级子组件 -->
        <Level @get-level="getLevel"/>
        <!-- 首页地区子组件 -->
        <Region @get-region="getRegion"/>
        <!-- 首页医院内容卡片 -->
        <div class="hospital-card" v-if="hasHospitalArr.length>0">
          <!-- :hospitalInfo='item' 用于将item绑定到自定义组件的hospitalInfo属性。 -->
          <Card class="item" v-for="(item,index) in hasHospitalArr" :key="index" :hospitalInfo='item' />
        </div>
        <el-empty v-else description="暂无数据" />
        <!-- 分页器 -->
        <div class="pagination">
          <el-pagination
           v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true" 
            layout=" prev, pager, next, jumper,->, sizes,total"
            :total="total" 
            @current-change="currentChange"
            @size-change="sizeChange"/>
        </div>
      </el-col>
      <!-- 侧边栏 -->
      <el-col :span="4">
        <Tip/>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
// 引入首页轮播图组件
import Carousel from './carousel/index.vue'
// 引入首页搜索框组件
import Search from './home-search/index.vue'
// 引入首页等级的组件
import Level from './home-level/index.vue'
// 引入首页地区的组件
import Region from './home-region/index.vue'
// 引入首页内容卡片
import Card from './home-card/index.vue'
// 引入首页右侧公告结构
import Tip from './home-tip/index.vue'
// 引入限制数据类型
import type{Content,HospitalResponseData} from '../../api/home/type'

// 引入生命周期和回调
import { onMounted, ref } from 'vue';
import { reqHospital } from '../../api/home';
// 分页器需要的数据
let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
// 存储已有的医院数据
let hasHospitalArr = ref<Content>([]);
// 存储医院等级
let hostype = ref<string>('');
// 存储医院地区
let districtCode = ref<string>('');
//存储医院总个数
let total = ref(0);
// 组建挂载完毕：发一次请求
onMounted(() => {
  getHospitalInfo();
});
// 获取已有医院数据
const getHospitalInfo = async () => {
  // 获取医院数据：默认获取第 1页、一页10个医院数据
  let result:HospitalResponseData= await reqHospital(pageNo.value, pageSize.value,hostype.value,districtCode.value);
  if(result.code==200){
    //存储已有医院数据
    hasHospitalArr.value = result.data.content;
    
    // 存储医院总个数
    total.value = result.data.totalElements;
  }
}
// 分页器页码发生变化时候回调
const currentChange = ()=>{
  getHospitalInfo();
}
// 分页器下拉菜单时发生变化时触发
const sizeChange = ()=>{
  pageNo.value = 1;
  getHospitalInfo();
}
// 子组件定义事件：获取子组件给父组件传递过来的等级
// 等级
const getLevel = (level:string)=>{
  // 收集参数：等级参数
  hostype.value = level;
  // 再次发请求
  getHospitalInfo();
}
// 地区
const getRegion = (region:string)=>{
  districtCode.value = region;
  getHospitalInfo();
}
</script>

<style scoped lang="scss">
.hospital-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    margin: 10px;
    width: 46%;
  }

}

.pagination {
  margin: 20px;
}
</style>